<template>
  <page>
    <div class="page-header border-1px-bottom" slot="top">
      <div class="header-left" @click="$back">
        <i class="iconfont">&#xe68c;</i>
      </div>
      <h3>地址编辑</h3>
      <div class="header-right">
        <span @click="doSave">保存</span>
      </div>
    </div>
    <div class="address-update">
      <div class="update-item">
        <div class="item-title">
          <span>收货人姓名</span>
        </div>
        <div class="item-text">
          <input type="text" placeholder="收货人" v-model="form.delivery_user">
        </div>
      </div>
      <div class="update-item">
        <div class="item-title">
          <span>手机号码</span>
        </div>
        <div class="item-text">
          <input type="text" placeholder="手机号码" v-model="form.phone">
        </div>
      </div>
      <div class="update-item">
        <div class="item-title">
          <span>配送城市</span>
        </div>
        <div class="item-text">
          <div class="item-text">
<!--            <input type="text" disabled  v-model="form.address">-->
          </div>
        </div>
      </div>
      <div>
<!--        <area-select v-model="form.city_ids" :data="pcaa" :level="2" @change="getChangeVal" :large="large"></area-select>-->
        <area-select v-model="form.city_ids" :type="selectType" :data="$pcaa" :level="3" @change="getChangeVal"></area-select>
      </div>
      <div class="update-item">
        <div class="item-title">
          <span>详细地址</span>
        </div>
        <div class="item-text">
          <input type="text" placeholder="详细地址" v-model="form.detailed">
        </div>
      </div>
      <!--      <div class="update-item">-->
      <!--        <div class="item-title">-->
      <!--          <span>邮政编码</span>-->
      <!--        </div>-->
      <!--        <div class="item-text">-->
      <!--          <input type="text" placeholder="邮政编码" v-model="form.code">-->
      <!--        </div>-->
      <!--      </div>-->



    </div>
  </page>
</template>

<script type="text/ecmascript-6">
  import {toast} from '@/libs/cube-ui'
  import VDistpicker from 'v-distpicker'
  import { pca, pcaa } from 'area-data';


  export default {
    components: { VDistpicker },
    data() {
      return {
        editType: '',
        form: {
          id: '',
          delivery_user: '',
          phone: '',
          address: '',
          detailed: '',
          city_ids:[],
          city_name:''
        },

        pca: pca,
        pcaa: pcaa,
        large:"large",
        selectType:'all',
      }
    },
        created() {
         let type = this.$route.query.type;
         let cityIds = this.$route.query.city_ids;
         this.editType = type;
         if (type === 'edit') {
            this.getAddressInfo();
            this.$set(this.form, 'city_ids',cityIds.split('-'))
         } else {
           this.form.city_ids = ['510000', '510100', '510107', '510107004']
         }
       },
    methods: {
      async getAddressInfo(){
        let id = this.$route.query.id;
        await this.doRequest.get('address_info?id=' + id).then(ret=>{
          let info = ret.data;
          this.form = {
            id: info.id,
            delivery_user: info.delivery_user,
            phone: info.phone,
            address: info.address,
            detailed: info.detailed,
            city_name:info.city_name,
            city_ids: info.city_ids
          }
        })
      },
      doSave() {
        console.log(this.selected)
        let data = this.form;
        if (!data.delivery_user || !data.phone || !data.detailed) {
          toast('信息未填写完整', 'warn');
          return false;
        }
        if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(data.phone))){
          toast('手机号码有误', 'warn');
          return false;
        }
        this.doRequest.post('address_update', this.form).then(ret => {
          if (ret.success) {
            let url = '/checkout/address?b=1';
            let allQuery = this.$route.query;
            //?a=1&from=order&sku_ids=22&buy_num=1
            let ableUseParams = ['a','from','sku_ids','buy_num']
            for(let i in allQuery){
              if(ableUseParams.includes(i)){
                url+=("&"+i+'='+allQuery[i]);
              }
            }
            this.$go(url,false)
          } else {
            toast(ret.errors.message, 'warn')
          }

        });
      },
      getChangeVal(value){
        let chooseCityIds = [];
        let chooseAreaName = '';
        for(var key in value){
          let AreaData = value[key];
          chooseCityIds.push(Object.keys(AreaData)[0]);
          chooseAreaName+=Object.values(AreaData)[0];
        }
        this.form.address = chooseAreaName;
        this.form.city_ids = chooseCityIds;
        console.log(this.form.city_ids)
      },
    }
  }
</script>
<style lang="less" scoped>
  @import '../../static/less/index';

  .page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    background: white;

    .header-left {
      position: absolute;
      top: 50%;
      left: 30px;
      transform: translateY(-50%);
    }

    h3 {
      font-size: 30px;
      font-weight: 600;
      color: #333;
    }

    .header-right {
      position: absolute;
      top: 50%;
      right: 30px;
      transform: translateY(-50%);

      span {
        color: #666;
      }
    }
  }

  .address-update {
    padding: 0 43px;
    background: white;

    .update-item {
      position: relative;
      display: flex;
      height: 107px;
      color: #333;

      .item-title {
        display: flex;
        align-items: center;
        flex-basis: 172px;
      }

      .item-text {
        display: flex;
        align-items: center;
        flex: 1;

        input {
          border: none;
          outline: none;
        }
      }

      &:not(:last-child) {
        &::after {
          position: absolute;
          content: '';
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          border-bottom: 1px solid @border-color;
          transform: scaleY(0.5);
        }
      }
    }
  }


</style>

<style>
  .area-select.medium{
    height: 50px;
  }

  .area-selected-trigger.area-selected-trigger{
    font-size: 30px;
  }

  .area-selectable-list.area-selectable-list{
    font-size: 25px;
    margin-top: 10px;
  }
  .area-select-wrap .area-select{
    width: 170px;
  }

  .area-select-wrap .area-selectable-list-wrap{
    max-height:86vw;
    padding-top: 10px;
  }
  .area-selectable-list .area-select-option{
    margin-top: 10px;
  }
</style>
